<template>
  <div id="ALLECHARTS">
    <div id="chart" ref="myRef" class="chart" style="height: 100%;width: 100%" >
    </div>
  </div>
</template>

<script setup>
import {watch, ref, onMounted, nextTick,onBeforeUnmount} from 'vue';
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);
const props = defineProps({
  options: {
      type: Object,
      default: ()=> {return {}}
    },
});
let chart = ''

watch(()=> props.options, (curr) => {
  chart.setOption(curr, true);
  chart.hideLoading();
},{deep: true})


const myRef = ref()
onMounted(() => {
  nextTick(()=>{
    chart = echarts.init(myRef.value);
    chart.showLoading({
      text: "",
      color: "#fff",
      textColor: "#fff",
      maskColor: "transparent",
      zlevel: 0,
    });
    })
})
onBeforeUnmount(()=>{
  chart.clear()
  chart.dispose()
  chart = null
})
// export default {
//   name: "echartView",
//   components: {
//     // TITLESS,
//     Buttons,
//   },
//   props: {
//     className: {
//       type: String,
//       default: "chart",
//     },
//     // 标题组件内容
//     TITLESS: {
//       type: String,
//       default: "",
//     },
//     // 按钮显示
//     BtShow: {
//       type: Boolean,
//       default: false,
//     },

//     id: {
//       type: String,
//       default: "chart",
//     },
//     width: {
//       type: String,
//       default: "100%",
//     },
//     height: {
//       type: String,
//       default: "100%",
//     },
//     options: {
//       type: Object,
//       default: () => ({}),
//     },
//     noShow: {
//       type: Boolean,
//       default: false,
//     },
//   },
//   data() {
//     return {
//       chart: null,
//       selected: [],
//       btC: 0,
//       btList: [
//         {
//           id: 1,
//           name: "当天",
//           active: true,
//         },
//         {
//           id: 2,
//           name: "近一周",
//           active: true,
//         },
//         {
//           id: 3,
//           name: "近一月",
//           active: true,
//         },
//       ],
//     };
//   },
//   watch: {
//     options: {
//       handler(options) {
//         // console.log(options, "改变了");
//         if (options.legend && options.legend.selected) {
//           options.legend.selected = this.selected;
//         }
//         this.chart.setOption(options, true);
//         this.chart.hideLoading();
//       },
//       deep: true,
//     },
//   },
//   mounted() {
//     // echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
//     this.$nextTick(() => {
//       this.initChart();
//     });

//     //   window.addEventListener("onmessageDevice", (event) => {
//     //     // // 在这里处理接收到的数据 data

//     // console.log("echarts接受的");
//     //   });
//   },
//   beforeUnmount() {
//     this.chart.clear();
//     this.chart.dispose();
//     this.chart = null;
//   },
//   methods: {
//     initChart() {
//       // 初始化echart
//       this.chart = this.$echarts.init(this.$refs[this.id], "tdTheme");
//       // 调用showLoading方法
//       this.chart.showLoading({
//         text: "",
//         color: "#fff",
//         textColor: "#fff",
//         maskColor: "transparent",
//         zlevel: 0,
//       });
//       this.chart.setOption(this.options, true);
//       this.extension(this.chart);

//       let that = this;
//       this.chart.on("legendselectchanged", function (obj) {
//         that.selected = obj.selected;
//       });
//     },
//     // 鼠标移入显示X全称
//     extension(chart) {
//       // 判断是否创建过div框,如果创建过就不再创建了
//       // 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
//       var elementDiv = document.getElementById("extension");
//       if (!elementDiv) {
//         var div = document.createElement("div");
//         div.setAttribute("id", "extension");
//         div.style.display = "block";
//         document.querySelector("html").appendChild(div);
//       }
//       chart.on("mouseover", function (params) {
//         if (
//           params.componentType == "xAxis" ||
//           params.componentType == "yAxis"
//         ) {
//           var elementDiv = document.querySelector("#extension");
//           //设置悬浮文本的位置以及样式
//           var elementStyle =
//             "position: absolute;z-index: 99999;color:#fff;font-size: 12px;padding: 8px;display: inline;border-radius: 4px;background-color: #044c73;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px";
//           elementDiv.style.cssText = elementStyle;
//           elementDiv.innerHTML = params.value;
//           document.querySelector("html").onmousemove = function (event) {
//             var elementDiv = document.querySelector("#extension");
//             var xx = event.pageX + 10;
//             var yy = event.pageY - 30;
//             elementDiv.style.top = yy + "px";
//             elementDiv.style.left = xx + "px";
//           };
//         }
//       });
//       chart.on("mouseout", function (params) {
//         if (
//           params.componentType == "xAxis" ||
//           params.componentType == "yAxis"
//         ) {
//           var elementDiv = document.querySelector("#extension");
//           elementDiv.style.cssText = "display:none";
//         }
//       });
//     },
//     btClick(i) {
//       this.btC = i;
//       this.$emit("btChg", i);
//     },
//   },
// };
</script>

<style lang='scss' scoped>
#ALLECHARTS {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  .empty {
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    position: absolute;
    top: 220px;
    left: 41%;
  }
  .TITLESS {
    display: flex;
    margin-bottom: 10px;
  }
  .buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    .itemBox {
      color: red !important;
    }
    .color1 {
      filter: grayscale(100%);
      -webkit-filter: grayscale(100%);

      color: #ccc !important;
    }
    .color2 {
      color: rgba(0, 228, 255, 1) !important;
    }
  }
}
</style>
